<template>
  <!-- dialog窗口 用于添加和编辑的弹窗-->
  <el-dialog :title="dialogInfo.title"
             @close="dialogClose"
             :visible.sync="dialogVisible">
    <el-form :model="stuForm"
             :rules="stuRules"
             ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload class="uploadAvatar"
                   ref="uploadAvatar"
                   action="http://chst.vip/students/uploadStuAvatar"
                   list-type="picture-card"
                   :on-success="uploadSuccess"
                   :on-remove="removeAvatar"
                   :limit="1"
                   name="headimgurl"
                   :multiple="false">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名"
                    prop="name">
        <el-input v-model="stuForm.name"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址"
                    prop="productUrl">
        <el-input v-model="stuForm.productUrl"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级"
                    prop="class">
        <el-input v-model="stuForm.class"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄"
                    prop="age">
        <el-input v-model="stuForm.age"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市"
                    prop="city">
        <el-input v-model="stuForm.city"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历"
                    prop="degree">
        <el-input v-model="stuForm.degree"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述"
                    prop="description">
        <el-input v-model="stuForm.description"
                  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary"
                 @click="confirmClick('addStuRuleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import * as api from "@/api"
  export default {
    data() {
      return {
        dialogInfo: {
          title: "增加学员信息",
          action: "add",//操作是增加还是编辑
          editSuccessMsg: "增加成功",
          editerrorMsg: "增加失败"
        },
        showAvatar: true,
        dialogVisible: false,//控制dialog显示和隐藏
        stuRules: {
          name: [
            { required: true, message: '请输入名字', trigger: 'blur' }
          ],
          class: [
            { required: true, message: '请输入班级', trigger: 'blur' }
          ],
          degree: [
            { required: true, message: '请输入学历', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请输入城市', trigger: 'blur' }
          ],
          productUrl: [
            { required: true, message: '请输入项目地址', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ]
        },
        stuForm: {
          name: '',
          productUrl: '',
          headimgurl: '',
          class: '',
          age: '',
          city: '',
          degree: '',
          description: ''
        },
        oldFrom: {}
      }
    },
    created() {
      //储存了初始状态的表单数据,为了方便清空表单的内容
      this.oladForm = { ...this.stuForm };
    },
    mounted() {
      //储存一下没有输入值的stuForm对象
      this.$bus.$on("add-stu", () => {
        this.dialogInfo.title = "增加成员信息"
        this.dialogVisible = true;
        //将当前的行为变成增加
        this.dialogInfo.action = "add"
        // 清空表单数据
        this.stuForm=this.oldFrom
      })

      this.$bus.$on('edit-stu', (row) => {
        this.dialogInfo.title = "编辑成员信息"
        this.dialogVisible = true;
        //将行为变成编辑
        this.dialogInfo.action = "edit"
        //数据回显
        //对表格当前这一行数据做浅拷贝
        let r = { ...row };
        //去除不需要的属性
        delete r._id
        //给stuFrom重新赋值
        this.stuForm = r;
      })
    },
    methods: {
      dialogClose() {//dialog关闭时触发的回调
        //清空输入框的值;
        //this.stuForm = this.oldFrom; //清空输入框的值
      },
      uploadSuccess(r) {//图片上传成功的回调
        // console.log(r);
        this.stuForm.headimgurl=r.headimgurl
       

      },
      removeAvatar(r) {

      },
      confirmClick(formName) {
        // 表单的本地校验
        this.$refs[formName].validate(valid=>{
          if(valid){//表单验证成功
          // 关闭dialog
          this.dialogVisible=false
          //发送数据stuForm给增加成员接口
          // 点击确定的时候判断当前行为，是增加、还是编辑
          switch(this.dialogInfo.action){
            case "add"://增加
             api.addStuApi(this.stuForm)
              .then(res=>{
              if(res.data.state){
                  // 添加成功
                    this.$message.success("成功添加")
                  // 更新表格数据                 
                  // 通过bus进行通知数据更新
                  this.$bus.$emit("update-table")
                  // 清空表单数据
                  this.stuForm=this.oldFrom
              }
              })
              .catch(err=>{
                console.log(err);
              })
              break
              case "edit":
                api.editStuApi(this.stuForm)
                  .then(res=>{
                    if(res.data.state){
                  // 添加成功
                    this.$message.success("修改信息成功")
                  // 更新表格数据                 
                  // 通过bus进行通知数据更新
                  this.$bus.$emit("update-table")
                  this.stuForm=this.oldFrom
              }
                  })
                  .catch(err=>{
                   this.$message.error(err)
                  })

          }
           
            //  清除掉编辑的头像
            this.$refs.uploadAvatar.clearFiles()
          }


          
        })
       
      }
    }
  }
</script>
<style>
  .uploadAvatar {
    text-align: left;
  }
  .el-upload-list__item.is-success,
  .el-upload--picture-card {
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
  }
  .el-dialog__header {
    text-align: center !important;
    padding: 0 !important;
    line-height: 60px;
  }
</style>